/**
* @description: 通信检修app首页
* @author: JiWei
* @date:
**/
<template>
  <view class="content">
    <view class="nav">
      <view class="left-title">首页</view>
    </view>
    <view class="header-bar">
      <ul class="menu">
        <li v-for="(item,index) in menuList" :key="index" @click="chooseMenu(item,index)">
          <img :src=item.imgUrl alt="">
          <text class="title-menu">{{ item.title }}</text>
        </li>
      </ul>
    </view>
    <view class="home-main">
      <view class="title-home">
        <text class="big-title">工单进度监控</text>
      </view>
      <view class="task-complate">
        <view class="task-echarts">
          <echartsPie v-bind="progessEchart"></echartsPie>
        </view>

      </view>
    </view>
    <tabBar :current="bottomTab" :list="list"></tabBar>
  </view>
</template>

<script>
import echartsPie from '../../components/common/echartsPie'
import tabBar from '../../components/common/tabBar'

export default {
  components: {echartsPie,tabBar},
  data() {
    return {
      current:0, // 顶部跳转
      menuList:[
        {
          imgUrl: require('../../static/img/selectAll.png'),
          title:'工单领取'
        },
        {
          imgUrl: require('../../static/img/xsrw.png'),
          title:'待办工单'
        },
        {
          imgUrl: require('../../static/img/lsrw.png'),
          title:'已办工单'
        },
        {
          imgUrl: require('../../static/img/dbrw.png'),
          title:'作业知识助手'
        }
      ],
      bottomTab:0,
      list:[
        {
          text: "首页", // 页面标题
          icon: require("../../static/img/noSelectHome.png"), //未选中图标
          icon_a: require("../../static/img/selectHome.png"), //选中图片
          path: "/pages/testProject/index",
        },
        {
          text: "我的",
          icon: require("../../static/img/noSelectMine.png"),
          icon_a: require("../../static/img/selectMine.png"),
          path: "/pages/testProject/mine",
        },
      ],
      taskProgressCount: {}, // 工单进度监控数据
    };
  },
  watch: {
  },
  onLoad() {
    this.getMission()
  },
  computed: {
    progessEchart:function() { // 工单进度监控，非管理员
      const xData = ['待领取','执行中','已完成'];
      const yData = [this.taskProgressCount.DLQ,this.taskProgressCount.ZXZ,this.taskProgressCount.YWG]
      const total = String(this.taskProgressCount.TOTAL)
      const charDataPie = {
        boxType: 'pieCri',
        xData: xData,
        yData: [yData],
        color:['#FF7271','#FEC319','#5494FF'],
        legendData: ['待领取','执行中','已完成'],
        grName: total,
        title:'全部工单',
        criRadius:['70%', '90%'],
        legendConfig:{
          orient: 'vertical',
          left:'66%',
          align:'left',
          top:'30%',
        },
        grid:{
          top: '0px', left: '6%', right: '4%', bottom: '0px', containLabel: true
        }
      };
      return charDataPie;
    },
  },
  methods: {
    // 工单进度监控
    getMission() {
      this.$api.getProgressCount().then((res) => {
        this.taskProgressCount = res.data
      })
    },
    chooseMenu(item,index) {
      this.current = index
      switch(item.title) {
        case '工单领取': {
          uni.navigateTo({
            url: '/pages/testProject/taskReceive'
          })
          break;
        }
        case '待办工单': {
          uni.navigateTo({
            url: '/pages/testProject/todoTask'
          })
          break;
        }
        case '已办工单': {
          uni.navigateTo({
            url: '/pages/testProject/completedTask'
          })
          break;
        }
        case '作业知识助手': {
          uni.navigateTo({
            url: '/pages/testProject/knowledgeAssistant'
          })
          break;
        }
      }
    },
    chooseTask(currentTab) {
      this.taskCurrent = currentTab
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  overflow: hidden;
  .nav {
    width: 100vw;
    height: px2vh(163);
    background: #417ADC;
    position: relative;
    .left-title {
      padding-top: px2vh(75);
      height: px2vh(54);
      font-weight: bold;
      font-size: px2vh(54);
      line-height: px2vh(50);
      color: #fff;
      img {
        width: px2vw(44);
        height: px2vh(28);
        vertical-align: middle;
      }
    }
    .left-title {
      float: left;
      margin-left: px2vw(50);
    }
  }
  .header-bar {
    width: 100vw;
    height: px2vh(150);
    border-radius: 0 0 px2vw(40) px2vw(40);
    background: #417ADC;
    margin-bottom: px2vh(230);
    .menu {
      width: px2vw(1020);
      height: px2vh(330);
      background-image: url('../../static/img/sybj.png');
      background-size: px2vw(1020) px2vh(330);
      margin-left: px2vw(30);
      li {
        width: calc(1 * (100% - #{px2vw(140)}) / 4);
        height: 100%;
        margin-left: px2vw(28);
        float: left;
        text-align: center;
        position: relative;
        img {
          display: block;
          width: px2vw(146);
          height: px2vw(146);
          margin-top: px2vh(54);
          margin-left: px2vw(40);
          margin-bottom:px2vh(20);
        }
        .title-menu {
          font-size: px2vw(36);
          color: #333;
        }
      }
    }
  }
  .home-main {
    width: 100vw;
    height: calc(100vh - #{px2vh(700)});
    overflow: auto;
    .title-home {
      width: px2vw(1020);
      font-weight: bold;
      font-size: px2vw(40);
      color: #666;
      text-indent: 0.5em;
      margin-left: px2vw(30);
      margin-bottom: px2vh(30);
    }
    .task-complate {
      width: px2vw(1020);
      height: px2vh(520);
      background: #fff;
      margin-left: px2vw(30);
      margin-bottom: px2vh(30);
      padding-top: px2vh(40);
      .task-echarts {
        width: calc(100% - #{px2vw(40)});
        margin-left: px2vw(20);
        height: calc(100% - #{px2vh(42)});
      }
    }
  }
}
</style>